<div [@routerTransition] id="my-salary">
  <div class="m-subheader">
    <div class="row align-items-center">
      <div class="mr-auto col-auto">
        <h3 class="m-subheader__title m-subheader__title--separator">
          <span>个人工资列表</span>
        </h3>
        <span class="m-section__sub">
          工资列表详细信息
        </span>
      </div>

    </div>
  </div>

  <div class="m-content">
    <div class="m-portlet">
      <div class="m-portlet__body  m-portlet__body--no-padding">
        <div class="row m-row--no-padding m-row--col-separator-xl">
          <div class="col-xl-4">
            <!--begin:: Widgets/Stats2-1 -->
            <div class="m-widget1">
              <div class="m-widget1__item">
                <div class="row m-row--no-padding align-items-center">
                  <div class="col">
                    <h3 class="m-widget1__title">
                      应发总计
                    </h3>
                    <span class="m-widget1__desc">
                      Awerage Weekly Profit
                    </span>
                  </div>
                  <div class="col m--align-right">
                    <span class="m-widget1__number m--font-brand">
                      +￥17,800
                    </span>
                  </div>
                </div>
              </div>
              <div class="m-widget1__item">
                <div class="row m-row--no-padding align-items-center">
                  <div class="col">
                    <h3 class="m-widget1__title">
                      实发总计
                    </h3>
                    <span class="m-widget1__desc">
                      Weekly Customer Orders
                    </span>
                  </div>
                  <div class="col m--align-right">
                    <span class="m-widget1__number m--font-danger">
                      +￥1,800
                    </span>
                  </div>
                </div>
              </div>
              <div class="m-widget1__item">
                <div class="row m-row--no-padding align-items-center">
                  <div class="col">
                    <h3 class="m-widget1__title">
                      税款总计
                    </h3>
                    <span class="m-widget1__desc">
                      System bugs and issues
                    </span>
                  </div>
                  <div class="col m--align-right">
                    <span class="m-widget1__number m--font-success">
                      -27,49%
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <!--end:: Widgets/Stats2-1 -->
          </div>
          <div class="col-xl-4">
            <!--begin:: Widgets/Daily Sales-->
            <div class="m-widget14">
              <div class="m-widget14__header m--margin-bottom-30">
                <h3 class="m-widget14__title">
                  每月工资趋势
                </h3>
                <span class="m-widget14__desc">
                  Check out each collumn for more details
                </span>
              </div>
              <div class="m-widget14__chart" style="height:120px;">
                <div class="chartjs-size-monitor"
                  style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                  <div class="chartjs-size-monitor-expand"
                    style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                    <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                  </div>
                  <div class="chartjs-size-monitor-shrink"
                    style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                    <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                  </div>
                </div>
                <div id="c1"></div>
              </div>
            </div>
            <!--end:: Widgets/Daily Sales-->
          </div>
          <div class="col-xl-4">
            <!--begin:: Widgets/Profit Share-->
            <div class="m-widget14">
              <div class="m-widget14__header">
                <h3 class="m-widget14__title">
                  收入比例
                </h3>
                <span class="m-widget14__desc">
                  Profit Share between customers
                </span>
              </div>
              <div class="row  align-items-center">
                <div class="col">
                  <div id="m_chart_profit_share" class="m-widget14__chart" style="height: 160px">
                    <div class="m-widget14__stat">
                      45
                    </div>
                    <svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%"
                      class="ct-chart-donut" style="width: 100%; height: 100%;">
                      <g class="ct-series custom">
                        <path d="M151.916,108.314A66.5,66.5,0,0,0,91.745,13.5" class="ct-slice-donut" ct:value="32"
                          ct:meta="{&amp;quot;data&amp;quot;:{&amp;quot;color&amp;quot;:&amp;quot;#716aca&amp;quot;}}"
                          style="stroke-width: 17px;" stroke-dasharray="133.70706176757812px 133.70706176757812px"
                          stroke-dashoffset="-133.70706176757812px" stroke="#716aca">
                          <animate attributeName="stroke-dashoffset" id="anim0" dur="1000ms"
                            from="-133.70706176757812px" to="0px" fill="freeze" stroke="#716aca" calcMode="spline"
                            keySplines="0.23 1 0.32 1" keyTimes="0;1"></animate>
                        </path>
                      </g>
                      <g class="ct-series custom">
                        <path d="M40.506,122.389A66.5,66.5,0,0,0,152.014,108.104" class="ct-slice-donut" ct:value="32"
                          ct:meta="{&amp;quot;data&amp;quot;:{&amp;quot;color&amp;quot;:&amp;quot;#00c5dc&amp;quot;}}"
                          style="stroke-width: 17px;" stroke-dasharray="133.938720703125px 133.938720703125px"
                          stroke-dashoffset="-133.938720703125px" stroke="#00c5dc">
                          <animate attributeName="stroke-dashoffset" id="anim1" dur="1000ms" from="-133.938720703125px"
                            to="0px" fill="freeze" stroke="#00c5dc" begin="anim0.end" calcMode="spline"
                            keySplines="0.23 1 0.32 1" keyTimes="0;1"></animate>
                        </path>
                      </g>
                      <g class="ct-series custom">
                        <path d="M91.745,13.5A66.5,66.5,0,0,0,40.654,122.567" class="ct-slice-donut" ct:value="36"
                          ct:meta="{&amp;quot;data&amp;quot;:{&amp;quot;color&amp;quot;:&amp;quot;#ffb822&amp;quot;}}"
                          style="stroke-width: 17px;" stroke-dasharray="150.65414428710938px 150.65414428710938px"
                          stroke-dashoffset="-150.65414428710938px" stroke="#ffb822">
                          <animate attributeName="stroke-dashoffset" id="anim2" dur="1000ms"
                            from="-150.65414428710938px" to="0px" fill="freeze" stroke="#ffb822" begin="anim1.end"
                            calcMode="spline" keySplines="0.23 1 0.32 1" keyTimes="0;1"></animate>
                        </path>
                      </g>
                    </svg>
                  </div>
                </div>
                <div class="col">
                  <div class="m-widget14__legends">
                    <div class="m-widget14__legend">
                      <span class="m-widget14__legend-bullet m--bg-accent"></span>
                      <span class="m-widget14__legend-text">
                        37% 基本工资
                      </span>
                    </div>
                    <div class="m-widget14__legend">
                      <span class="m-widget14__legend-bullet m--bg-warning"></span>
                      <span class="m-widget14__legend-text">
                        47% 岗位工资
                      </span>
                    </div>
                    <div class="m-widget14__legend">
                      <span class="m-widget14__legend-bullet m--bg-brand"></span>
                      <span class="m-widget14__legend-text">
                        19% 效益工资
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--end:: Widgets/Profit Share-->
          </div>
        </div>
      </div>
    </div>
    <div class="m-portlet">
      <div class="m-portlet__body  m-portlet__body--no-padding">

        <div class="row m-row--no-padding m-row--col-separator-xl">
          <div class="col-md-12">
            <div class="m-widget24">
              <!-- [frozenColumns]="year" -->
              <p-table #dataTable [value]="salary" [scrollable]="true" selectionMode="single">
                <ng-template pTemplate="colgroup" let-columns>
                  <colgroup>
                    <col *ngFor="let col of columns" style="width:150px">
                  </colgroup>
                </ng-template>
                <ng-template pTemplate="header">
                  <tr>
                    <th rowspan="2" style="width:100px">年份</th>
                    <th rowspan="2" style="width:100px">月份</th>
                    <th rowspan="2" style="width:100px">部门</th>
                    <th rowspan="2" style="width:100px">姓名</th>
                    <th rowspan="2" style="width:100px">员工编号</th>
                    <th rowspan="2" style="width:100px">岗位基本工资</th>
                    <th rowspan="2" style="width:100px">岗位津贴</th>
                    <th rowspan="2" style="width:100px">研究生津贴</th>
                    <th rowspan="2" style="width:100px">班组长津贴</th>
                    <th rowspan="2" style="width:100px">绩效工资</th>
                    <th rowspan="2" style="width:100px">加班费</th>
                    <th rowspan="2" style="width:100px">加班餐补</th>
                    <th rowspan="2" style="width:100px">保密津贴</th>
                    <th rowspan="2" style="width:100px">保健费</th>
                    <th rowspan="2" style="width:100px">交通费</th>
                    <th rowspan="2" style="width:100px">其他</th>
                    <th rowspan="2" style="width:100px">公司预支生育津贴</th>
                    <th rowspan="2" style="width:100px">本月应发工资</th>
                    <th rowspan="2" style="width:100px">本月应发合计</th>
                    <th rowspan="2" style="width:100px">累计应税金额</th>
                    <th colspan="2" style="width:200px">养老统筹</th>
                    <th colspan="2" style="width:200px">医疗保险</th>
                    <th colspan="2" style="width:200px">失业保险</th>
                    <th colspan="1" style="width:100px">工伤保险</th>
                    <th colspan="1" style="width:100px">生育保险</th>
                    <th colspan="2" style="width:200px">公积金</th>
                    <th rowspan="2" style="width:100px">累计专项附加扣除</th>
                    <th rowspan="2" style="width:100px">累计应税收入</th>
                    <th rowspan="2" style="width:100px">当月应税金</th>
                    <th rowspan="2" style="width:100px">实发工资</th>
                    <th rowspan="2" style="width:100px">实发金额</th>

                  </tr>
                  <tr>
                    <th colspan="1" style="width:100px">单位缴纳16%</th>
                    <th colspan="1" style="width:100px">个人缴纳8%</th>
                    <th colspan="1" style="width:100px">单位缴纳10%</th>
                    <th colspan="1" style="width:100px">个人缴纳2%</th>
                    <th colspan="1" style="width:100px">单位缴纳0.5%</th>
                    <th colspan="1" style="width:100px">个人缴纳0.5</th>
                    <th colspan="1" style="width:100px">单位缴纳0.45%</th>
                    <th colspan="1" style="width:100px">单位缴纳0.5%</th>
                    <th colspan="1" style="width:100px">单位缴纳12%</th>
                    <th colspan="1" style="width:100px">个人缴纳12%</th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-salary>
                  <tr>
                    <td style="width:100px">{{salary.year}}</td>
                    <td style="width:100px">{{salary.month}}</td>
                    <td style="width:100px">{{salary.dptName}}</td>
                    <td style="width:100px">{{salary.userName}}</td>
                    <td style="width:100px">{{salary.userCode}}</td>
                    <td style="width:100px">{{salary.postWageBase}}</td>
                    <td style="width:100px">{{salary.postSubsidy}}</td>
                    <td style="width:100px">{{salary.graduateSubsidy}}</td>
                    <td style="width:100px">{{salary.jobForemanSubsidy}}</td>
                    <td style="width:100px">{{salary.performanceWage}}</td>
                    <td style="width:100px">{{salary.overtimePay}}</td>
                    <td style="width:100px">{{salary.overtimeMealSubsidy}}</td>
                    <td style="width:100px">{{salary.secrecySubsidy}}</td>
                    <td style="width:100px">{{salary.healthServicesPay}}</td>
                    <td style="width:100px">{{salary.trafficPay}}</td>
                    <td style="width:100px">{{salary.otherPay}}</td>
                    <td style="width:100px">{{salary.birthPrepaid}}</td>
                    <td style="width:100px">{{salary.salaryPayable}}</td>
                    <td style="width:100px">{{salary.salaryPayableTotal}}</td>
                    <td style="width:100px">{{salary.taxableAmount}}</td>
                    <td style="width:100px">{{salary.annuityOfCompany}}</td>
                    <td style="width:100px">{{salary.annuityOfPerson}}</td>
                    <td style="width:100px">{{salary.medicareOfCompany}}</td>
                    <td style="width:100px">{{salary.medicareOfPerson}}</td>
                    <td style="width:100px">{{salary.unemploymentOfCompany}}</td>
                    <td style="width:100px">{{salary.unemploymentOfPerson}}</td>
                    <td style="width:100px">{{salary.employmentInjuryOfCompany}}</td>
                    <td style="width:100px">{{salary.birthInsuranceOfCompany}}</td>
                    <td style="width:100px">{{salary.accumulationFundOfCompany}}</td>
                    <td style="width:100px">{{salary.accumulationFundOfPerson}}</td>
                    <td style="width:100px">{{salary.specialAdditionalDeductionTotal}}</td>
                    <td style="width:100px">{{salary.taxableSalaryTotal}}</td>
                    <td style="width:100px">{{salary.taxTotal}}</td>
                    <td style="width:100px">{{salary.takeHomeWage}}</td>
                    <td style="width:100px">{{salary.takeHomeAmount}}</td>
                  </tr>
                </ng-template>
                <ng-template pTemplate="footer">
                  <tr>
                    <td colspan="21">Totals</td>
                    <td style="width:100px">{{amount}}</td>
                  </tr>
                </ng-template>
              </p-table>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>